<template>
  <el-row class="logwhit">
    <!-- 登陆 -->
    <el-col :span="8" :offset="15" class="logmu" :v-if="true">
      <div class="logone">{{loginstatus}}</div>
      <div class="logonetw" v-if="headlog">
        <div :class="{logborderbottom:!isflog}" @click="uselogin">账号密码登录</div>
        <div :class="{logborderbottom:isflog}" @click="telllogin">手机号登录</div>
      </div>
      <!-- 输入框 -->
      <!-- 控制是否显示 -->
      <div v-if="isflog">
        <div class="useinput">
          <el-input
            prefix-icon="el-icon-phone"
            placeholder="手机号码"
            :clearable="true"
            v-model="ruleForm.user"
          ></el-input>
        </div>
        <div class="useinput">
          <el-input prefix-icon="el-icon-message" placeholder="验证码" v-model="ruleForm.rules"></el-input>
          <el-button style="margin-left:8px">获取验证码</el-button>
        </div>
        <div class="useinput" v-if="!headlog">
          <el-input placeholder="请输入新密码" :clearable="true" v-model="ruleForm.newpass"></el-input>
        </div>
      </div>
      <!-- 手机号码 -->
      <div v-else>
        <div class="useinput">
          <el-input placeholder="请输入,账号，邮箱，手机号码" :clearable="true" v-model="ruleForm.user"></el-input>
        </div>
        <div class="useinput">
          <el-input placeholder="密码" v-model="ruleForm.pass"></el-input>
        </div>
      </div>
      <div class="forgert123">
        <el-checkbox v-model="checked">自动登陆</el-checkbox>
        <el-link type="primary" @click="forget" v-if="headlog" :underline="false">忘记密码</el-link>
      </div>
      <div class="useinput">
        <el-button type="primary" style="width:100%" @click="getsing">登陆</el-button>
      </div>
      <div class="forgert123">
        <div class="othelogin">
          其他登陆方式:
          <el-image
            style="width: 24px; height: 24px"
            class="curpoing"
            @click="gothree"
            src="./static/igm/QQ.png"
            fit="fit"
          ></el-image>
          <el-image
            style="width: 24px; height: 24px"
            class="curpoing"
            @click="gothree"
            src="./static/igm/web.png"
            fit="fit"
          ></el-image>
          <el-image
            style="width: 24px; height: 24px"
            class="curpoing"
            @click="gothree"
            src="./static/igm/wx.png"
            fit="fit"
          ></el-image>
        </div>
        <el-link type="primary" :underline="false" @click="goneuser">注册账户</el-link>
      </div>
      <div class="useinput">
        <div class="othelogin">
          <div>帮助</div>
          <div>隐私</div>
          <div>协议</div>
        </div>
      </div>
      <div class="useinput">@2019 &nbsp &nbsp &nbsp 理财1+1系统</div>
    </el-col>
    <!-- 注册 -->
  </el-row>
</template>
<script>
export default {
  data() {
    return {
      checked: false,
      activeName: "second",
      ruleForm: {
        user: "",
        pass: "",
        newpass: "",
        rules: ""
      },
      isflog: false, //是否手机登陆
      loginstatus: "登陆", //登陆状态
      headlog: true,
      newpassword: "",
      checked: true //新密码
    };
  },
  methods: {
    // 登陆状态修改,
    getsing() {
      if (this.ruleForm.user) {
        this.$store.commit("increment",true);
        this.$router.push({path:"index"})
      } else {
        this.$message({
          message: "输入内容为空",
          type: "warning"
        })
      }
    },
    goneuser() {
      this.$router.push({ path: "sinin" });
    },
    // 用户登陆
    uselogin() {
      this.isflog = false;
      this.ruleForm.user = "";
      this.ruleForm.pass = "";
    },
    // telllog
    telllogin() {
      this.isflog = true;
      this.ruleForm.user = "";
      this.ruleForm.rules = "";
      this.ruleForm.rules = "";
    },
    // 忘记密码
    forget() {
      this.loginstatus = "忘记密码";
      this.headlog = false;
      this.isflog = true;
      //情况密码栏
      this.ruleForm.user = "";
      this.ruleForm.rules = "";
      this.ruleForm.newpass = "";
    },
    // 第三方登陆
    gothree() {
      this.$router.push({ path: "treein" });
    }
  },
  created() {
    this.isflog = true;
    this.ruleForm.user = "";
    this.ruleForm.rules = "";
    this.ruleForm.rules = "";
    this.headlog = true;
  }
};
</script>

<style scoped>
.curpoing {
  cursor: pointer;
}
.logonetw {
  display: flex;
  justify-content: space-around;
  font-size: 20px;
  line-height: 28px;
}
.logone {
  width: 100%;
  margin: 30px 0;
  text-align: center;
  font-size: 20px;
  line-height: 28px;
}
.logwhit {
  width: 100%;
  background-color: #ffffff;
  height: 751px;
  background: url("../../static/igm/登录页面.png") no-repeat;
  background-size: 100% 100%;
}
.logmu {
  margin-top: 30px;
  margin-right: 20px;
  height: 70%;
  background-color: #ffffff;
  border: 1px solid #797979;
}
.useinput {
  width: 80%;
  display: flex;
  justify-content: center;
  padding: 0 10%;
  margin-top: 25px;
}
.forgert123 {
  width: 80%;
  display: flex;
  padding: 0 10%;
  margin-top: 25px;
  justify-content: space-between;
}
.othelogin {
  width: 200px;
  margin-left: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.logborderbottom {
  border-bottom: 3px solid #0000ff;
  color: #0000ff;
}
.logonetw:hover {
  cursor: pointer;
}
.tell {
  display: none;
}
a {
  width: 30%;
}
</style>